<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>

    <link href="../icons/message.png" rel="icon">
    <link rel="stylesheet" type="text/css" href="../css/register.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="registerBox">
        <div id="register">
                <form id="registerForm" action="#" method="post" @keyup.enter="register">
                    <h1 id="register_logo">REGISTER</h1>

                    <el-upload
                            action="http://localhost/users/upload"
                            class="avatar-uploader"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="registerForm.avatar" :src="registerForm.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span id="up">上传头像</span>
                    <p>Username:<input id="username" v-model="registerForm.username" name="username" placeholder="请输入账号" type="text" maxlength="11"></p>

                    <p>Password:<input id="password" v-model="registerForm.password" name="password" type="password" placeholder="请输入密码" autocomplete="off" maxlength="15"></p>

                    <p>Email:<input id="email" v-model="registerForm.email" name="email" placeholder="请输入邮箱" type="text"></p>

                    <p>Age:<input id="age" v-model="registerForm.age" name="age" placeholder="请输入年龄" type="number" max="100" min="0"></p>

                    <span id="sex_span">Sex：
                    男<input class="sex" type="radio" v-model="registerForm.sex" name="sex" value="男" checked>
                    女<input class="sex" type="radio" v-model="registerForm.sex" name="sex" value="女">
                    </span>

                    <p>验证码:<input type="text" v-model="registerForm.code" placeholder="请输入验证码"><img class="code" id="code" src="/users/getCode" @click="getCode"></p>

                    <div id="bt">
                        <input class="register_submit" name="register_submit" type="button" @click="register" value="RESGISTER">
                    </div>
                </form>
        </div>
    </div>


    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#registerBox',
            data:{
                registerForm: {
                    avatar:""
                }
            },
            created(){

            },

            methods: {
                //注册方法
                register(){
                    console.log(this.registerForm)
                    axios.post("http://localhost/users/register",this.registerForm).then((rsp) => {
                        if (rsp.data.code == 20051){
                            this.$message.success(rsp.data.message);
                            setTimeout(() => {
                                location.href = "/pages/login.html"
                            },3000);
                        } else if (rsp.data.code == 20050){
                            this.$message.error(rsp.data.message);
                        } else {
                            this.$message.info(rsp.data.message);
                        }
                    })
                },
                handleAvatarSuccess(res, file) {
                    this.registerForm.avatar = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPGOrPNG = file.type === 'image/jpeg' || 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPGOrPNG) {
                        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPGOrPNG && isLt2M;
                },
                getCode(){
                    let code = document.getElementById("code");
                    code.src = code.src + "?"+Math.random()*1000;
                }
            }
        })


    </script>
</body>
</html>